<template>
	<view class="">
		<uni-nav-bar :statusBar="true" :border="false" title='数据窗'>
			<view slot="right" class="right">
				<image src="../../../static/jiahao.png" class="" mode=""></image>
			</view>
		</uni-nav-bar>
		<view class="ROW JUSB search CENT">
			<view class="search_row">
				<view class="CENT">
					<image src="../../../static/shousuo.png"  mode=""></image>
				</view>
				<view class="CENT FLEX_1">
					<input type="text" value="" placeholder="搜索行业、地区、项目、人员" />
				</view>
			</view>
		</view>
		<view class="">
			
		<!-- <slFilter :menuList='menuList' @result='cheack'>职位</slFilter>
		 -->	
			
		</view>
		<view class="ROW JUSB DATA_row">
			<view class="UPDW CENT FLEX_1">
				<view class="title1">1000</view>
				<view class="title2">项目总数</view>
			</view>
			<view class="UPDW CENT FLEX_1">
				<view class="title1">1000</view>
				<view class="title2">收入(元)</view>
			</view>
			<view class="UPDW CENT FLEX_1">
				<view class="title1">1000</view>
				<view class="title2">支出(元)</view>
			</view>
		</view>
		<view class="ROW UPDW">
			<view class="JUSB FLEX_1 title_row">
				<view class="title1"> 
					项目概况
				</view>
				<view class="title2">
					了解管多 >
				</view>
			</view>
		</view>
		<view class=" ROW  mokuai_row JUSB">
			<view class="UPDW JUSB mokuai"  v-for="(item,index) in list" :key='index' :class="item.class" @click="toamount(index)">
				<view class="mokuai_title1">
					{{item.number}}
				</view>
				<view class="JUSB mokuai_title2 CENT">
					<view class="">
						{{item.text}}
					</view>
					<view class="">
						>
					</view>
				</view>
			</view>
		</view>
		<view class="ROW  mokuai_row2 JUSB">
			<view class="mokuai2 JUSB">
				<view class="UPDW mokuai2_r JUSB CENT" v-for="(item,index) in list2" :key='index'>
					<view class="CENT title1">
						{{item.number}}
					</view>
					<view class="CENT title2">
						{{item.text}}
					</view>
				</view>
			</view>
		</view>
		<view class="ROW UPDW">
			<view class="JUSB FLEX_1 title_row">
				<view class="title1"> 
					综合信息
				</view>
				<view class="title2">
					查看具体信息 >
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {
		   
		},
		data() {
			return {
				list:[
					{
						number:200,
						text:'人事',
						class:'bg1'
					},
					{
						number:589,
						text:'安全',
						class:'bg2'
					},
					{
						number:3000,
						text:'资产',
						class:'bg3'
					},
					{
						number:1250,
						text:'市场',
						class:'bg4'
					},
					{
						number:1212,
						text:'质量',
						class:'bg5'
					},
					{
						number:2130,
						text:'能耗',
						class:'bg6'
					},
					{
						number:3000,
						text:'考核',
						class:'bg7'
					},{
						number:2356,
						text:'量',
						class:'bg8',
						link:'amount'
					},
					{
						number:1569,
						text:'结算',
						class:'bg9'
					}
					
					
				],
				list2:[
					{
						number:8,
						text:'安全问题'
					},
					{
						number:12,
						text:'质量问题'
					},
					{
						number:10,
						text:'项目变更'
					},
					{
						number:8,
						text:'人员异动'
					},
					{
						number:1,
						text:'考核异常'
					},
					{
						number:3,
						text:'维护'
					},
					{
						number:4,
						text:'售后'
					},
					{
						number:7,
						text:'反馈'
					}
					
					
				],
				menuList: [
				    {
				        'title': '行业',
				        'detailTitle': '子标题1',
				        'isMutiple': true,
				        'key': 'key_1',
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            },
				            {
				                'title': '条件_1_1',
				                'value': 'val_1_1'
				            },
				            {
				                'title': '条件1_2',
				                'value': 'val_1_2'
				            }
				        ]
				    },
				    {
				        'title': '地区',
				        'detailTitle': '子标题2',
				        'key': 'key_2',
				        'isMutiple': false,
				        'detailList': [
				            {
				                'title': '不限',
				                'value': ''
				            },
				            {
				                'title': '条件_2_1',
				                'value': 'val_2_1'
				            },
				            {
				                'title': '条件_2_2',
				                'value': 'val_2_2'
				            }
				        ]
				    },
				    {
				        'title': '湖口项目',
				        'detailTitle': '子标题3',
				        'key': 'key_3',
				        'isSort': true,
				        'isMutiple': false,
				        'detailList': [
				            {
				                'title': '条件_3_1',
				                'value': 'val_3_1'
				            },
				            {
				                'title': '条件_3_2',
				                'value': 'val_3_2'
				            },
				            {
				                'title': '条件_3_3',
				                'value': 'val_3_3'
				            }
				        ]
				    },
					{
					    'title': '人员',
					    'detailTitle': '子标题3',
					    'key': 'key_4',
					    'isSort': true,
					    'isMutiple': false,
					    'detailList': [
					        {
					            'title': '条件_3_1',
					            'value': 'val_3_1'
					        },
					        {
					            'title': '条件_3_2',
					            'value': 'val_3_2'
					        },
					        {
					            'title': '条件_3_3',
					            'value': 'val_3_3'
					        }
					    ]
					}
				],
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {
			toamount(index){
				if(index === 7){
					this.$utils.navto('../../amount/amount')
				}else{
					return ;
				}
				
			},
			cheack(e){
				console.log(e)
			},
			toWindowData(item) {
				if(item.link) {
					console.log(item.link)
					this.$utils.navto('/pages/windowData/'+item.link)
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	page{
		background: #f9f9f9;
	}
.right{
	image{
		height: 36rpx;
		width: 36rpx;
	}
}
.DATA_row{
	background: #FFFFFF;
	width: 100%;
	padding: 32rpx ;
	box-sizing: border-box;
}
.title1{
	font-size:28rpx ;
	// color: #454545;
}
.title2{
	font-size:24rpx ;
	color: #a0a0a0;
}
.search{
	margin-top:32rpx ;
	height: 60rpx;
	padding:0 32rpx ;
	.search_row{
		width: 100%;
		background:#f7f7f7 ;
		border-radius:30rpx ;
		padding-left: 25rpx;
	}
	image{
		height: 27rpx;
		width: 27rpx;
		margin-right: 20rpx;
	}
	input{
		width: 100%;
	}
}
.title_row{
	padding: 0 32rpx;
}
.mokuai_row{
	flex-wrap: wrap;
	width: 100%;
	
	box-sizing: border-box;
}
.mokuai{
	margin:  20rpx;
	border-radius:8rpx ;
	height: 115rpx;
	width: 210rpx;
	padding: 27rpx 32rpx;
	background: #007AFF;
	box-sizing: border-box;
	.mokuai_title1{
		font-size: 27rpx;
		color: #FFFFFF;
	}
	.mokuai_title2{
		font-size: 20rpx;
		color: #FFFFFF;
	}
}

.mokuai_row2{
	width: 100%;
	padding: 20rpx;
	box-sizing: border-box;
	.mokuai2{
		flex-wrap: wrap;
		width: 100%;
	}
	.mokuai2_r{
		height: 75rpx;
		width: 23%;
		margin-bottom: 20rpx;
	}
}
.bg1{
	background: #007AFF !important;
}
.bg2{
	background: #18d677 !important;
}
.bg3{
	background: #efae11 !important;
}
.bg4{
	background: #797af9 !important;
}
.bg5{
	background: #f4c14c !important;
}
.bg6{
	background: #cc80f7 !important;
}
.bg7{
	background: #32db7d !important;
}
.bg8{
	background: #7974f8 !important;
}
.bg9{
	background: #f58560 !important;
}
</style>
